<div class="fui-calendar-header">
  <div class="fui-calendar-header-year" (click)="_changeView('year')" [class.viewActive]="!_monthView">{{_getYearTest}}</div>
  <div class="fui-calendar-header-date" (click)="_changeView('month')" [class.viewActive]="_monthView">{{_getDateText}}</div>
</div>
<div class="fui-calendar-controls">
  <button class="previous-button fui-focus-ripple" (click)="_previousClicked()">
    <svg fuiIcon="angle-left" size="md" color="secondary"></svg>
  </button>
  <div class="fui-calendar-controls-text">{{_getControlsText}}</div>
  <button class="next-button fui-focus-ripple" (click)="_nextClicked()">
    <svg fuiIcon="angle-right" size="md" color="secondary"></svg>
    <div class="ripple-out"></div>
  </button>
</div>
<div class="fui-calendar-content" [ngSwitch]="_monthView">
  <fui-year-view
    *ngSwitchDefault
    [activeDate]="_activeDate"
    [selected]="selected"
    [dateFilter]="_dateFilterForViews"
    [format]="format"
    (selectedChange)="_monthSelected($event)"
  ></fui-year-view>
  <fui-month-view
    *ngSwitchCase="true"
    [activeDate]="_activeDate"
    [selected]="selected"
    [dateFilter]="_dateFilterForViews"
    [showTime]="showTime"
    [format]="format"
    (selectedChange)="_dateSelected($event)"
    (userSelection)="_userSelected()"
  ></fui-month-view>
  <div class="fui-calendar-time">
    <fui-timepicker
      *ngIf="showTime"
      [ngModel]="_activeDate"
      (selectedChange)="_timeSelected($event)"
    ></fui-timepicker>
  </div>
</div>
